import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, Popconfirm, message, Modal, Select, TreeSelect, Checkbox, Tabs, Tag, Popover, Upload, DatePicker } from 'antd'
import moment from 'moment'
import Edit from 'mixin/edit'
import { backUrl } from 'lib/fun'

const ButtonGroup = Button.Group;
const FormItem = Form.Item;
const SelectTreeNode = TreeSelect.TreeNode;
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const Dragger = Upload.Dragger;

@Form.create()
@inject('appStore')
@observer
class ModuleName extends Edit {
  constructor(props) {
    super(props);
    this.state = Object.assign({
      listImg: '',
      coverImg: '',
      listImgVisible: false,
    }, this.state)
    this.api = {
      get: '/admin/interview/get',
      save: '/admin/interview/save',
      upload: '/admin/uploadimage'
    }
    this.itemKey = 'interviewId';
    this.contentKey = 'introduction';
    this.contentKey2 = 'explainStr';
    this.um2 = null;
  }

  msgCallback = (result)=>{
    this.um&&this.um.setContent(result[this.contentKey]);
    this.um2&&this.um2.setContent(result[this.contentKey2]);
  }
  checkData = (values)=>{
    this.other = {
      [this.contentKey2]: this.um2?this.um2.getContent():""
    }
    return true;
  }
  reset = () => {
    this.um2&&(this.um2.setContent(""));
  }

  initOther = () => {
    if(!this.um2){
      this.initUeditor('ueditor2', 'um2', 'contentKey2');
    }
  }

  unmountOther = () => {
    this.um2&&this.um2.destroy();
  }

  render() {
    const { visible, type } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const formItemLayout2 = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    const { msgData } = this.state;
    const { interviewTypeEn } = this.props.appStore.commonData;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传</div>
      </div>
    );
    return (
      <Modal
        title={ type == 'edit'?"修改":"新建" }
        visible={visible}
        onOk={ this.handleCommit }
        onCancel={ this.onCancel }
        okText="确定"
        cancelText="取消"
        width="800px"
        maskClosable={false}
      >
        <Spin spinning={this.state.loading}>
          <Form>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="面试服务标题">
                  {getFieldDecorator("title",{
                    initialValue: type == 'edit'?msgData.title:"",
                  })(
                    <Input size="default"/>
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="分类">
                  {getFieldDecorator("categoryId",{
                    initialValue: type == 'edit'?`${msgData.categoryId}`:"",
                  })(
                    <Select size="default">
                      {
                        (interviewTypeEn||[]).map(item=>{
                          return <Option key={item.code}>{item.mean}</Option>
                        })
                      }
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="导师id">
                  {getFieldDecorator("teacherId",{
                    initialValue: type == 'edit'?msgData.teacherId:"",
                  })(
                    <Input size="default"/>
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                  <FormItem {...formItemLayout} label="价格">
                    {getFieldDecorator("price",{
                      initialValue: type == 'edit'?msgData.price:"",
                    })(
                      <Input size="default"/>
                    )}
                  </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="销售数量">
                  {getFieldDecorator("saleCount",{
                    initialValue: type == 'edit'?msgData.price:"",
                  })(
                    <Input size="default"/>
                  )}
                </FormItem>
             </Col>
            </Row>
            <Row>
              <Col span={24}>
                <FormItem {...formItemLayout2} label="要求">
                  <div id="ueditor2" style={{height: 240}}></div>
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem {...formItemLayout2} label="简介">
                  <div id="ueditor" style={{height: 240}}></div>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Spin>
      </Modal>
    )
  }
}

module.exports = ModuleName
